
import React,{Component} from 'react'
import {facilityMessage, facilityApk} from 'action/facilityOption.js'
import {Option} from 'action/option.js'

export default class EquipmentAnalysis extends Component{
	
	Message(){
		let App=echarts.init(document.querySelector("#Facility-message")),
				Name=['离线设备','离线投放','在线投放','离线','在线'],
				Color=['rgb(135,201,62)','rgb(219,220,72)','rgb(108,198,218)',
							'rgb(112,202,142)'];
					
		
		let Data={
			Type: ['pie', 'pie'],
			Title:Name,
			name: Name,
			value: [335,679,679,335,310,234],
			Radius:[[0, '30%'],['40%','55%']],
			center:['50%','50%'],
			active:[true],
			list:[2,5],
		};
				
			console.log(Option(Data,3,Color,4))
			App.setOption(Option(Data,3,Color,4));
//		App.setOption(facilityMessage(Data,3,Color,4));
	}
	
	Apk(){
			let App=echarts.init(document.querySelector("#Facility-Apk")),
				Name=['APK3.1.2','APK3.2.2','APK3.2.4','安卓4.2','安卓4.3','安卓4.4'],
				Color=['rgb(135,201,62)','rgb(219,220,72)','rgb(108,198,218)',
							'rgb(112,202,142)','rgb(230,123,119)']
				
		App.setOption(facilityApk("apk",Name,Color));
	}
	
	componentDidMount(){
		
		let w=(window.getComputedStyle(
				document.querySelector('.Facility-message'))).width.replace('px','');
			
		document.querySelector('#Facility-message').width=w;
		document.querySelector('#Facility-Apk').width=w;
		
		this.Message();
		
		this.Apk();
		
	}
	
	render(){
		return(
			<div className="progress">
				<article className="IssueNumber progress">
					<div className="regiona2">
						<h2>Analysis of equipment on line and delivery mod</h2>
	 					<div className="select">
		 					<select>
		 						<option value="1">全国</option>
		 						<option value="2">南区</option>
		 					</select>
	 					</div>
	 				</div>
	 			</article>
				<article className="Facility-message progress1">
					<canvas id="Facility-message" width="500" height="450px">	
					</canvas>
				</article>
				<article className="Facility-message progress1">
					
					<canvas id="Facility-Apk" width="500" height="450px">	
					</canvas>
				</article>
			</div>
		)
	}
}
